<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/bootstrap-slider.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
  <style type="text/css">
      body{
        width:450px;
        font-family: sans-serif;
      }
      .container{
        background-color: #eee
      }
      .slider-selection {
        background: #8283FF;
      }
      .slider-handle {
        border-bottom-color: blue;
      }
      .row{
        margin-top:10px;
        border-bottom: 1px dotted;
        padding-bottom: 10px;
      }
      #links a{
        text-align: center;
        display: block;
        line-height: 2em;
      }
      #colorSelect div{
        width:20px;
        height:20px;
        float: left;
        margin-left: 5px;
      }

    </style>  
  </head>
  <body> 

    <div class="container">
      <h3>字体控制</h3>
      <div class="row">
        <div class="col-md-3 col-xs-3 title">字体</div>
        <div class="col-md-9 col-xs-9 content">
            <select id="fontFamily" style="width:70%">
              <option value="cursive">cursive</option>
              <option value="serif">serif</option> 
              <option value="微软雅黑">微软雅黑</option>
              <option value="monospace">monospace</option>
              <option value="fantasy">fantasy</option>
              <option value="courier New">courier New</option>
              <option value="Lato">Lato</option>
            </select>
        </div>
      </div>
      <div class="row">  
        <div class="col-md-3 col-xs-3 title">大小</div>
        <div class="col-md-9 col-xs-9 content">
            <input type="text" class="span2" value="" 
            data-slider-min="10" data-slider-max="50" 
            data-slider-step="1" data-slider-value="20" 
            data-slider-id="BC" 
            id="fontSize" 
            data-slider-handle="triangle" />
        </div>
      </div>
      <div class="row">  
        <div class="col-md-3 col-xs-3 title">粗细</div>
        <div class="col-md-9 col-xs-9 content"> 
             <input 
              type="text"
              id="fontBold"
              data-provide="slider"
              data-slider-ticks="[100, 200, 300, 400,500,600,700,800,900]"
              data-slider-ticks-labels='["100", "200", "300", "400", "500","600","700","800","900"]'
              data-slider-min="100"
              data-slider-max="900"
              data-slider-step="100"
              data-slider-value="500"
              data-slider-tooltip="hide" />
        </div>
      </div>
      <h3>背景色</h3>
      <div class="row"> 
       <div class="col-md-2 col-xs-2 title">快捷选</div>
        <div class="col-md-10 col-xs-10 content" id="colorSelect">
           <div style="background-color: #C7EDCC" data="#C7EDCC"></div> 
           <div style="background-color: #f5f5f5" data="#f5f5f5"></div> 
        </div> 
      </div> 
       <div class="row">
          <div class="col-md-2 col-xs-2 title">自定义</div>
          <div class="col-md-10 col-xs-10 content">
             <input class="jscolor" id="background-color" value="" style="margin-left:90px">
          </div>
       </div>
      <div class="row"> 
         <input type="button" value="恢复样式" id="refreshBt" style="margin-left:90px"/>
      </div>
      <hr/>
      <h3>常用地址</h3>
      <div class="row" id=links>
        <div><a href="#" data="https://git.cai-inc.com/">GIT仓库</a></div>
        <div><a href="#" data="http://10.110.2.50:8200/zcy-message-center/dev2/develop">配置中心</a></div>
        <div><a href="#" data="https://qiye.aliyun.com">邮件</a></div>
        <div><a href="#" data="http://118.178.149.133:28180/">pinpoint</a></div>
        <div><a href="#" data="http://confluence.cai-inc.com:8090/">confluence</a></div>
        <div><a href="#" data="http://corp.cai-inc.com/">禅道</a></div>
        
        
      </div>
    </div> 
    
    <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
    <script src="js/jscolor.js"></script>
    <script type="text/javascript" src="js/popup.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-slider.js"></script> 
   
  </body>
</html>